import React from 'react';
import { AppBar, Toolbar, Typography, Button, Box, Container, Chip } from '@mui/material';
import { styled, keyframes } from '@mui/material/styles';
import { useLocation, useNavigate } from 'react-router-dom';
import { Home, Analytics, Psychology, Info, MedicalServices, TrendingUp } from '@mui/icons-material';

// 动画关键帧
const glow = keyframes`
  0% {
    box-shadow: 0 0 5px rgba(102, 126, 234, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.8);
  }
  100% {
    box-shadow: 0 0 5px rgba(102, 126, 234, 0.5);
  }
`;

const float = keyframes`
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0px);
  }
`;

const shimmer = keyframes`
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
`;

const pulse = keyframes`
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
`;

const slideInDown = keyframes`
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
`;

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

// 现代化导航栏样式
const ModernAppBar = styled(AppBar)(({ theme }) => ({
  background: 'linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 50%, rgba(240, 147, 251, 0.95) 100%)',
  backdropFilter: 'blur(20px)',
  borderBottom: '1px solid rgba(255, 255, 255, 0.2)',
  boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05)',
  animation: `${slideInDown} 0.8s ease-out`,
  position: 'relative',
  '&::before': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    background: 'linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%)',
    animation: `${shimmer} 3s ease-in-out infinite`,
  },
}));

// 品牌标志样式
const BrandLogo = styled(Box)(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  gap: theme.spacing(1.5),
  cursor: 'pointer',
  transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
  position: 'relative',
  '&:hover': {
    transform: 'scale(1.05)',
    animation: `${pulse} 1s ease-in-out infinite`,
  },
}));

// 导航按钮样式
const NavButton = styled(Button)<{ active?: boolean }>(({ theme, active }) => ({
  borderRadius: '16px',
  padding: theme.spacing(1.5, 3),
  margin: theme.spacing(0, 0.5),
  color: 'white',
  fontWeight: 700,
  textTransform: 'none',
  position: 'relative',
  overflow: 'hidden',
  background: active ? 'rgba(255, 255, 255, 0.25)' : 'transparent',
  backdropFilter: active ? 'blur(15px)' : 'none',
  border: active ? '1px solid rgba(255, 255, 255, 0.4)' : '1px solid transparent',
  transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
  '&::before': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: '-100%',
    width: '100%',
    height: '100%',
    background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent)',
    transition: 'left 0.6s',
  },
  '&:hover': {
    background: 'rgba(255, 255, 255, 0.2)',
    transform: 'translateY(-4px) scale(1.05)',
    boxShadow: '0 8px 25px rgba(0, 0, 0, 0.3)',
    animation: `${glow} 1.5s ease-in-out infinite`,
    '&::before': {
      left: '100%',
    },
  },
  '&:active': {
    transform: 'translateY(-2px) scale(1.02)',
  },
}));

const Offset = styled('div')(({ theme }) => theme.mixins.toolbar);

const NavigationBar: React.FC = () => {
  const location = useLocation();
  const navigate = useNavigate();
  
  const navItems = [
    { 
      name: '首页', 
      path: '/', 
      icon: <Home />,
      description: 'Home'
    },
    { 
      name: '数据分析', 
      path: '/data-analysis', 
      icon: <Analytics />,
      description: 'Data Analysis'
    },
    { 
      name: 'AI诊断', 
      path: '/prediction', 
      icon: <Psychology />,
      description: 'AI Diagnosis'
    },
    { 
      name: '模型分析', 
      path: '/model-analysis', 
      icon: <TrendingUp />,
      description: 'Model Analysis'
    },
    { 
      name: '关于项目', 
      path: '/about', 
      icon: <Info />,
      description: 'About'
    },
  ];

  return (
    <>
      <ModernAppBar position="fixed" elevation={0}>
        <Container maxWidth="xl">
          <Toolbar sx={{ px: 0 }}>
            <BrandLogo 
              sx={{ 
                flexGrow: 1,
                textDecoration: 'none',
                color: 'inherit'
              }}
              onClick={() => navigate('/')}
            >
              <MedicalServices 
                sx={{ 
                  fontSize: 40, 
                  color: 'white',
                  animation: `${float} 3s ease-in-out infinite`,
                  '&:hover': {
                    animation: `${rotate} 2s linear infinite`,
                  }
                }} 
              />
              <Box>
                <Typography 
                  variant="h5" 
                  component="div" 
                  sx={{ 
                    fontWeight: 800,
                    color: 'white',
                    lineHeight: 1.2,
                    textShadow: '0 2px 4px rgba(0,0,0,0.3)',
                  }}
                >
                  🧠 BrainAI
                </Typography>
                <Typography 
                  variant="caption" 
                  sx={{ 
                    color: 'rgba(255, 255, 255, 0.8)',
                    fontWeight: 500,
                    letterSpacing: '0.5px'
                  }}
                >
                  智能脑肿瘤诊断系统
                </Typography>
              </Box>
              <Chip 
                label="AI Powered"
                size="small"
                sx={{
                  backgroundColor: 'rgba(255, 255, 255, 0.2)',
                  color: 'white',
                  fontWeight: 600,
                  fontSize: '0.7rem',
                  animation: `${glow} 2s ease-in-out infinite`,
                  ml: 1
                }}
              />
            </BrandLogo>
            
            <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
              {navItems.map((item) => (
                <NavButton
                  key={item.path}
                  startIcon={item.icon}
                  active={location.pathname === item.path}
                  title={item.description}
                  onClick={() => navigate(item.path)}
                >
                  {item.name}
                </NavButton>
              ))}
            </Box>
          </Toolbar>
        </Container>
      </ModernAppBar>
      <Offset />
    </>
  );
};

export default NavigationBar;